import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import {AtTag,AtButton,AtSearchBar,AtIcon} from 'taro-ui'
import './linkmedical.css'
import app from '../../../../main.js'

export default class LinkMedical extends Component {
    config = {
        navigationBarTitleText: '关联病历'
    }
    constructor () { 
        super(...arguments); 
        this.state={
            patient_id: this.$router.params.id,
            value:'',
            medicalList:[]
        }
    }

    go(url) {
        app.navigateTo(url);
    }

    // 搜索
    onChange(value){
        this.setState({
            value
        })
    }
    onActionClick(value){
        this.setState({
            medicalList: []
        });
        this.offset = 0;
        this.keyword = value;
        this.getData();
    }

    onClear(){
        this.setState({
            value:'',
            medicalList:[]
        })
        this.offset=0
        this.length=10
        this.keyword = ''
        this.total=0
        this.getData()
    }

    offset = 0
    length = 20
    total = 0
    keyword = ''
    onReachBottom(){
        var me = this;
        if((this.offset + this.length) < this.total){
            this.offset = this.offset + this.length
            app.toast('正在加载中...', function(res) {
                setTimeout(() => {
                    me.getData();
                }, 1000);
            });
        }else{
            app.toast('没有更多数据咯')
        }
    }
    
    getData(){
        let me = this
        let data = {offset:this.offset,length:this.length,keyword:this.keyword,patient_id: this.state.patient_id}
        let dataArray = []
        app.get('web/case/related_cases',data,function(res){
            dataArray = me.state.medicalList.concat(res.data.result.list)
            me.total = res.data.result.total
            me.setState({
                medicalList:dataArray
            })
        })
    }
    componentDidMount(){
        this.getData()
    }

    onChangeChecked(index) {
        var medicalList = this.state.medicalList;
        medicalList[index].checked = !medicalList[index].checked;
        this.setState({
            medicalList: medicalList
        });
    }

    save() {
        var me = this;
        var medicalList = this.state.medicalList;
        var ids = [];
        for (var i = 0; i < medicalList.length; i++) {
            var item = medicalList[i];
            if (item.checked) {
                ids.push(medicalList[i].id);
            }
        }
        ids = ids.join(',');
        app.post('web/case/set_related_cases', {patient_id: this.state.patient_id, case_ids: ids}, function(res) {
            if (res.data.status == 200) {
                app.success('提交成功', function(res) {
                    setTimeout(() => {
                        Taro.navigateBack({
                            delta: 1
                        });
                    }, 1000);
                });
            } else {
                app.toast('提交失败');
            }
        });
    }

    render () {
        let  medicalLists = this.state.medicalList.map((item, index)=>{
            return  <View className='medical-record'>
                        {item.status == '' || item.status == null || item.status == undefined
                        ? null
                        : <AtTag className='status' circle>{item.status}</AtTag>
                        }
                        <Checkbox value='选中' checked={item.checked} className='select-btn' onClick={this.onChangeChecked.bind(this, index)}></Checkbox>
                        <View className='first-line'>
                            <Text className='fl name'>{item.patient_name}</Text>
                            <Text className='fl'>{item.gender}</Text>
                            <Text className='fl'>{item.age}岁</Text>
                        </View>
                        <View className='second-line'>
                            {item.diagnosis == null
                            ? '' 
                            : item.diagnosis
                            }
                        </View>
                        <View className='third-line'>
                            <View className='float'>
                                <AtIcon value='bullet-list' size='22' color='#cccccc' className='icon'></AtIcon> 
                                {item.code == '' || item.code == null || item.code == undefined
                                ? null : item.code
                                }
                            </View>
                            <View className='float'>
                                <AtIcon value='calendar' size='20' color='#cccccc' className='icon'></AtIcon> 
                                {item.visit_at == '' || item.visit_at == null || item.visit_at == undefined
                                ? null : item.visit_at
                                }
                            </View> 
                        </View>
                    </View>
        })
  

        return (
            <View className='link-medical'>
                <AtSearchBar
                    actionName='搜一下'
                    value={this.state.value}
                    onChange={this.onChange.bind(this)}
                    onClear={this.onClear.bind(this)}
                    onActionClick={this.onActionClick.bind(this,this.state.value)}
                />
                <View className='tips'>
                    没有找到可以关联的病历？<Text className='new' onClick={this.go.bind(this, '../../../doctorpages/medicalhomepage/medicalhomepage')}>直接点击新建一个吧！</Text>
                </View>
                {medicalLists}
                <View className='blank-box'></View>
                <AtButton type='primary' full={true} className='link-btn' onClick={this.save.bind(this)}>关联</AtButton> 
            </View>
        );
    }
}